<template>
    <div class="login" style="width:100% ;height:100%;overflow: hidden;">
        <h1 style="text-align:center ;margin-top: 3%;">阳光学院学生管理系统</h1>
                       <!-- 输入框的盒子 -->
        <div style="width: 40%;height: 30%;margin-left: 41%;">  
            <div style="margin-top:35%; background-color: #FFF; ;padding: 20px;border-radius: 15px;">
                <label for="0" style="">学号：</label>
                <el-input placeholder="请输入学号/工号" v-model="user.studentNumber" clearable prefix-icon="el-icon-user"
                    style="width: 40%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
                </el-input>
                <div style="margin-top: 5%;">
                    <label for="" style="margin-top: 10%;">密码：</label>
                    <el-input placeholder="请输入密码" v-model="user.password" show-password prefix-icon="el-icon-key"
                        style="width:40% ;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"></el-input>
                </div>
            </div>
            <el-button type="primary" round style="margin-top:10%;margin-left:18%" @click="login">登录</el-button>
        </div>

    </div>
</template>

<script>


export default {
    data() {
        return {
            user: {
                studentNumber: '',
                password: ''
            }
        }
    },
    methods: {
                //校验输入框数据
        login() {
            console.log(this.user);
            if (!this.user.studentNumber) {
                this.$message.error('请输入用户名');
            } else if (!this.user.password) {
                this.$message.error('请输入密码');
            } else {  
                // console.log(this.user.studentNumber, this.user.password);
                    // 若输入框都不为空，则调用后端校验登录接口
                this.$axios.post(
                    "http://localhost:1010/user/login1"
                    , {
                        studentNumber: this.user.studentNumber,
                        password: this.user.password
                    },
                    {      //请求头！(以后接口要是调用成功但是没有正确传参请检查请求头类型)
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    }).then((res) => {
                        console.log(res.data.id);
                        if (!res.data) {
                            this.$message.error('用户名或密码错误');
                        } else {
                            this.$message({
                                message: '登录成功',
                                type: 'success'
                            }) //页面跳转
                            // const user = res.data;
                            sessionStorage.setItem('user', JSON.stringify(res.data));
                            this.$router.push({
                                path:"/sys",
                                query:{
                                    id:res.data.id
                                }
                            })
                        }
                    }).catch((error) => {
                        console.log(error);
                        this.$message.error('服务器异常');
                    })
            }
        }
    }
}
</script>

<style lang="scss" scoped></style>